
<template>
    <div id="app">
        <div id="main" style="width: 300px;height:350px;"></div>
    </div>
  </template>
   
  <script>
   
  export default {
    name: 'App',
    components: {},
    mounted() {
      this.onExample();
    },
    methods: {
      onExample() {
        let myChart  = this.$echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 100, name: '10岁以下' },
                { value: 240, name: '10-30岁' },
                { value: 120, name: '30-40岁' },
                { value: 120, name: '40岁-50岁' },
                { value: 340, name: '50岁以上' }
            ]
            }
        ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
  </script>
<style scoped>
</style>